<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scan Result Detail Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body class="min-h-screen bg-[#F5F5F7]">
    <div id="root"></div>

    <script type="text/babel">
      const { useState } = React;

      const MOCK_ISSUES = [
        {
          id: "Q-20240401-0001",
          level: "critical",
          ruleName: "API 命名不规范",
          filePath: "/src/api/user/profile.ts",
          line: 128,
          description:
            "API 名称未遵循驼峰命名规范，建议统一为 getUserProfile",
          apiName: "get_user_profile",
          interfaceType: "REST-GET",
          mismatchType: "命名规范不一致",
          suggestion: "统一重命名为 getUserProfile，并更新调用方",
          confirmStatus: "confirmed",
          confirmType: "fixed",
          inheritedFrom: {
            scanId: "SR-20240301-0012",
            time: "2024-03-01 11:20",
            branch: "master",
          },
          codeSnippet: `export async function get_user_profile(id: string) {
  return http.get(\`/api/user/\${id}/profile\`);
}`,
          confirmHistory: [
            {
              time: "2024-03-01 11:30",
              user: "张三",
              action: "confirm",
              type: "problem",
              comment: "确认为命名问题，计划在下个版本修复。",
            },
            {
              time: "2024-03-15 10:05",
              user: "李四",
              action: "modify",
              fromType: "problem",
              toType: "fixed",
              comment: "已完成接口重命名及调用方替换。",
            },
          ],
        },
        {
          id: "Q-20240401-0002",
          level: "warning",
          ruleName: "接口文档不一致",
          filePath: "/src/api/order/list.ts",
          line: 42,
          description: "返回字段 orderStatus 在文档描述与实际实现不一致。",
          apiName: "fetchOrderList",
          interfaceType: "REST-GET",
          mismatchType: "文档与实现不一致",
          suggestion: "统一以实现为准，修正文档说明。",
          confirmStatus: "unconfirmed",
          confirmHistory: [],
        },
        {
          id: "Q-20240401-0003",
          level: "info",
          ruleName: "建议添加错误码说明",
          filePath: "/src/api/common/error.ts",
          line: 10,
          description: "接口缺少错误码枚举的规范说明。",
          apiName: "getErrorCodeMeta",
          interfaceType: "REST-GET",
          mismatchType: "文档缺失",
          suggestion: "补充错误码说明文档。",
          confirmStatus: "confirmed",
          confirmType: "known",
          confirmHistory: [
            {
              time: "2024-04-01 14:12",
              user: "王五",
              action: "confirm",
              type: "known",
              comment: "已知问题，暂不处理，后续统一补充。",
            },
          ],
        },
      ];

      const levelConfig = {
        critical: {
          label: "严重",
          badgeClass:
            "bg-red-50 text-red-600 border border-red-200",
          dotClass: "bg-red-500",
        },
        warning: {
          label: "警告",
          badgeClass:
            "bg-amber-50 text-amber-600 border border-amber-200",
          dotClass: "bg-amber-500",
        },
        info: {
          label: "提示",
          badgeClass:
            "bg-sky-50 text-sky-600 border border-sky-200",
          dotClass: "bg-sky-500",
        },
      };

      const confirmTypeLabel = {
        problem: "确认为问题",
        falsePositive: "确认为误报",
        fixed: "确认为已修复",
        known: "确认为已知问题",
      };

      const confirmTypeTagClass = {
        problem: "bg-rose-50 text-rose-600 border border-rose-200",
        falsePositive:
          "bg-emerald-50 text-emerald-600 border border-emerald-200",
        fixed: "bg-indigo-50 text-indigo-600 border border-indigo-200",
        known: "bg-slate-50 text-slate-600 border border-slate-200",
      };

      const GlassCard = ({ className = "", children }) => (
        <div
          className={`rounded-2xl border border-slate-200/80 bg-white/90 backdrop-blur shadow-[0_14px_30px_rgba(15,23,42,0.04)] transition hover:bg-white ${className}`}
        >
          {children}
        </div>
      );

      const ScanResultDetailPage = () => {
        const [selectedIssue, setSelectedIssue] = useState(MOCK_ISSUES[0]);
        const [drawerOpen, setDrawerOpen] = useState(true);
        const [selectedIds, setSelectedIds] = useState([]);
        const [levelFilter, setLevelFilter] = useState([]);
        const [confirmStatusFilter, setConfirmStatusFilter] = useState("all");
        const [searchKeyword, setSearchKeyword] = useState("");

        const toggleSelectIssue = (id) => {
          setSelectedIds((prev) =>
            prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
          );
        };

        const toggleLevelFilter = (level) => {
          setLevelFilter((prev) =>
            prev.includes(level)
              ? prev.filter((l) => l !== level)
              : [...prev, level]
          );
        };

        const filteredIssues = MOCK_ISSUES.filter((issue) => {
          if (levelFilter.length > 0 && !levelFilter.includes(issue.level)) {
            return false;
          }
          if (
            confirmStatusFilter !== "all" &&
            issue.confirmStatus !== confirmStatusFilter
          ) {
            return false;
          }
          if (!searchKeyword.trim()) return true;
          const kw = searchKeyword.trim().toLowerCase();
          return (
            issue.description.toLowerCase().includes(kw) ||
            issue.filePath.toLowerCase().includes(kw) ||
            issue.ruleName.toLowerCase().includes(kw) ||
            (issue.apiName || "").toLowerCase().includes(kw)
          );
        });

        return (
          <div className="min-h-screen bg-[#F5F5F7] text-slate-900">
            <div className="relative flex min-h-screen">
              <aside className="hidden w-64 flex-col border-r border-slate-200/80 bg-white/90 backdrop-blur md:flex">
                <div className="flex items-center gap-2 px-6 py-4 border-b border-slate-100">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-xs font-bold text-white">
                    QK
                  </div>
                  <div>
                    <div className="text-sm font-semibold tracking-tight">
                      质量看板系统
                    </div>
                    <div className="text-xs text-slate-500">Code Quality Board</div>
                  </div>
                </div>
                <div className="mt-3 px-4 text-[11px] font-medium uppercase tracking-wide text-slate-400">
                  Scan Tasks
                </div>
                <nav className="mt-2 space-y-1 px-2">
                  <button className="flex w-full items-center justify-between rounded-xl bg-slate-900/5 px-3 py-2 text-sm text-slate-900 shadow-inner">
                    <span>鸿蒙仓颉 API 设计规范</span>
                    <span className="h-2 w-2 rounded-full bg-emerald-500" />
                  </button>
                  <button className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100">
                    <span>arkTS 接口一致性校验</span>
                  </button>
                  <button className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100">
                    <span>cjd 源码一致性扫描</span>
                  </button>
                </nav>
              </aside>

              <main className="flex-1">
                <header className="sticky top-0 z-20 border-b border-slate-200/80 bg-white/90 backdrop-blur">
                  <div className="flex items-center justify-between px-6 py-3">
                    <div className="flex items-center gap-2 text-xs text-slate-500">
                      <span>质量看板</span>
                      <span>/</span>
                      <span>鸿蒙仓颉 API 设计规范</span>
                      <span>/</span>
                      <span className="text-slate-800">扫描结果详情</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs text-slate-600">
                      <button className="rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium hover:bg-slate-50">
                        浅色
                      </button>
                      <div className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-2 py-1">
                        <div className="h-6 w-6 rounded-full bg-slate-300" />
                        <span>管理员 · Alex</span>
                      </div>
                    </div>
                  </div>
                </header>

                <div className="mx-auto flex max-w-7xl gap-5 px-4 py-6 lg:px-8">
                  <div className="flex-1 space-y-4">
                    <GlassCard className="p-5">
                      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                        <div className="space-y-2">
                          <div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-2 py-1 text-xs text-emerald-600">
                            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
                            扫描成功
                          </div>
                          <div className="text-lg font-semibold tracking-tight">
                            鸿蒙仓颉 API 设计规范扫描
                          </div>
                          <div className="text-sm text-slate-500">
                            2024-04-01 13:28 · master 分支
                          </div>
                          <div className="text-xs text-slate-400">
                            扫描记录 ID: <span className="font-mono">SR-20240401-0001</span>
                          </div>
                          <div className="text-xs text-slate-400">创建人：张三（zhangsan）</div>
                        </div>

                        <div className="grid grid-cols-2 gap-3 text-xs md:grid-cols-3">
                          <GlassCard className="p-3 text-xs bg-white">
                            <div className="text-slate-500">问题总数</div>
                            <div className="mt-1 text-xl font-semibold text-slate-900">
                              86
                            </div>
                            <div className="text-[11px] text-slate-400">较上周 +4%</div>
                          </GlassCard>
                          <GlassCard className="p-3 text-xs bg-white">
                            <div className="text-slate-500">已确认</div>
                            <div className="mt-1 text-xl font-semibold text-slate-900">
                              54
                            </div>
                            <div className="text-[11px] text-slate-400">含继承 32 条</div>
                          </GlassCard>
                          <GlassCard className="p-3 text-xs bg-white">
                            <div className="text-slate-500">继承率</div>
                            <div className="mt-1 text-xl font-semibold text-slate-900">
                              61%
                            </div>
                            <div className="text-[11px] text-slate-400">继承成功 32/52</div>
                          </GlassCard>
                          <GlassCard className="p-3 text-xs bg-white">
                            <div className="text-slate-500">扫描耗时</div>
                            <div className="mt-1 text-xl font-semibold text-slate-900">
                              03:27
                            </div>
                            <div className="text-[11px] text-slate-400">ArkTS 节点 4 核</div>
                          </GlassCard>
                          <GlassCard className="p-3 text-xs bg-white">
                            <div className="text-slate-500">最新确认</div>
                            <div className="mt-1 text-xl font-semibold text-slate-900">
                              2024-04-01 15:20
                            </div>
                            <div className="text-[11px] text-slate-400">操作人：张三</div>
                          </GlassCard>
                          <GlassCard className="p-3 text-xs bg-white">
                            <div className="text-slate-500">扩展信息</div>
                            <div className="mt-1 text-[11px] leading-relaxed text-slate-600">
                              规则版本：v1.2
                              <br />
                              扫描范围：/src/api/**
                            </div>
                          </GlassCard>
                        </div>

                        <div className="flex flex-col items-stretch justify-between gap-2 md:items-end">
                          <button className="inline-flex items-center justify-center rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-800">
                            重新扫描
                          </button>
                          <button className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-4 py-2 text-xs font-medium text-slate-800 hover:bg-slate-50">
                            导出结果
                          </button>
                          <button className="inline-flex items-center justify-center text-[11px] text-slate-400 hover:text-slate-700">
                            查看审计日志
                          </button>
                        </div>
                      </div>
                    </GlassCard>

                    <GlassCard className="flex flex-col gap-3 p-3 text-xs md:flex-row md:items-center md:justify-between">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="text-[11px] text-slate-500">问题级别：</span>
                        {["critical", "warning", "info"].map((level) => {
                          const active = levelFilter.includes(level);
                          const cfg = levelConfig[level];
                          return (
                            <button
                              key={level}
                              onClick={() => toggleLevelFilter(level)}
                              className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] transition ${
                                active
                                  ? cfg.badgeClass
                                  : "bg-white text-slate-600 border border-slate-200 hover:bg-slate-50"
                              }`}
                            >
                              <span
                                className={`h-1.5 w-1.5 rounded-full ${cfg.dotClass}`}
                              />
                              {cfg.label}
                            </button>
                          );
                        })}
                        <span className="ml-3 text-[11px] text-slate-500">确认状态：</span>
                        <select
                          className="h-7 rounded-full border border-slate-300 bg-white px-2 text-[11px] text-slate-700 outline-none"
                          value={confirmStatusFilter}
                          onChange={(e) => setConfirmStatusFilter(e.target.value)}
                        >
                          <option value="all">全部</option>
                          <option value="unconfirmed">未确认</option>
                          <option value="confirmed">已确认</option>
                        </select>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="flex items-center gap-2 rounded-full border border-slate-300 bg-white px-2 py-1">
                          <span className="text-[11px] text-slate-500">搜索：</span>
                          <input
                            value={searchKeyword}
                            onChange={(e) => setSearchKeyword(e.target.value)}
                            className="w-40 bg-transparent text-xs text-slate-800 placeholder:text-slate-400 focus:outline-none"
                            placeholder="描述 / 文件路径 / 规则..."
                          />
                        </div>
                        <button
                          className="rounded-full px-3 py-1 text-[11px] text-slate-500 hover:bg-slate-100"
                          onClick={() => {
                            setLevelFilter([]);
                            setConfirmStatusFilter("all");
                            setSearchKeyword("");
                          }}
                        >
                          重置筛选
                        </button>
                      </div>
                    </GlassCard>

                    <GlassCard className="overflow-hidden text-xs">
                      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-2 text-[11px] text-slate-500">
                        <span>问题列表 · 共 {filteredIssues.length} 条</span>
                        <button className="rounded-full px-2 py-1 hover:bg-slate-100">
                          列显示配置
                        </button>
                      </div>
                      <div className="max-h-[460px] overflow-auto">
                        <table className="min-w-full border-separate border-spacing-0 text-left">
                          <thead className="sticky top-0 bg-slate-50 backdrop-blur">
                            <tr className="text-[11px] uppercase tracking-wide text-slate-500">
                              <th className="w-8 border-b border-slate-200 px-3 py-2">
                                <input
                                  type="checkbox"
                                  className="h-3 w-3 rounded border-slate-400"
                                  onChange={(e) => {
                                    if (e.target.checked) {
                                      setSelectedIds(filteredIssues.map((i) => i.id));
                                    } else {
                                      setSelectedIds([]);
                                    }
                                  }}
                                  checked={
                                    selectedIds.length > 0 &&
                                    selectedIds.length === filteredIssues.length
                                  }
                                />
                              </th>
                              <th className="border-b border-slate-200 px-3 py-2">级别</th>
                              <th className="border-b border-slate-200 px-3 py-2">规则名称</th>
                              <th className="border-b border-slate-200 px-3 py-2">文件路径</th>
                              <th className="border-b border-slate-200 px-3 py-2">行号</th>
                              <th className="border-b border-slate-200 px-3 py-2">问题描述</th>
                              <th className="border-b border-slate-200 px-3 py-2">确认状态</th>
                              <th className="border-b border-slate-200 px-3 py-2">继承</th>
                            </tr>
                          </thead>
                          <tbody>
                            {filteredIssues.map((issue, idx) => {
                              const cfg = levelConfig[issue.level];
                              const last = idx === filteredIssues.length - 1;
                              const isSelected = selectedIds.includes(issue.id);
                              const confirmBadge =
                                issue.confirmStatus === "unconfirmed"
                                  ? null
                                  : issue.confirmType
                                  ? {
                                      label: confirmTypeLabel[issue.confirmType],
                                      className:
                                        confirmTypeTagClass[issue.confirmType],
                                    }
                                  : null;
                              return (
                                <tr
                                  key={issue.id}
                                  className={`cursor-pointer transition hover:bg-slate-50 ${
                                    isSelected ? "bg-slate-50" : ""
                                  }`}
                                  onClick={() => {
                                    setSelectedIssue(issue);
                                    setDrawerOpen(true);
                                  }}
                                >
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 ${
                                      last ? "border-none" : ""
                                    }`}
                                    onClick={(e) => e.stopPropagation()}
                                  >
                                    <input
                                      type="checkbox"
                                      className="h-3 w-3 rounded border-slate-400"
                                      checked={isSelected}
                                      onChange={() => toggleSelectIssue(issue.id)}
                                    />
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    <span
                                      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${cfg.badgeClass}`}
                                    >
                                      <span
                                        className={`h-1.5 w-1.5 rounded-full ${cfg.dotClass}`}
                                      />
                                      {cfg.label}
                                    </span>
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    {issue.ruleName}
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 font-mono text-[11px] text-slate-500 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    <span className="max-w-[220px] truncate">
                                      {issue.filePath}
                                    </span>
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 font-mono text-[11px] text-slate-500 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    {issue.line}
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 text-[11px] text-slate-700 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    <span className="line-clamp-2">{issue.description}</span>
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    {issue.confirmStatus === "unconfirmed" ? (
                                      <span className="rounded-full bg-slate-50 px-2 py-0.5 text-[11px] text-slate-600 border border-slate-200">
                                        未确认
                                      </span>
                                    ) : confirmBadge ? (
                                      <span
                                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] ${confirmBadge.className}`}
                                      >
                                        已确认 · {confirmBadge.label}
                                      </span>
                                    ) : (
                                      <span className="rounded-full bg-slate-50 px-2 py-0.5 text-[11px] text-slate-600 border border-slate-200">
                                        已确认
                                      </span>
                                    )}
                                  </td>
                                  <td
                                    className={`border-b border-slate-100 px-3 py-2 ${
                                      last ? "border-none" : ""
                                    }`}
                                  >
                                    {issue.inheritedFrom ? (
                                      <span className="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-0.5 text-[11px] text-purple-600 ring-1 ring-purple-200">
                                        <span className="h-1.5 w-1.5 rounded-full bg-purple-500" />
                                        继承
                                      </span>
                                    ) : (
                                      <span className="text-[11px] text-slate-400">-</span>
                                    )}
                                  </td>
                                </tr>
                              );
                            })}
                          </tbody>
                        </table>
                      </div>
                      <div className="flex items-center justify-between border-t border-slate-200 px-4 py-2 text-[11px] text-slate-500">
                        <span>共 {filteredIssues.length} 条 · 第 1/1 页</span>
                        <div className="flex items-center gap-2">
                          <button className="rounded-full px-2 py-1 hover:bg-slate-100">
                            上一页
                          </button>
                          <button className="rounded-full px-2 py-1 hover:bg-slate-100">
                            下一页
                          </button>
                        </div>
                      </div>
                    </GlassCard>

                    {selectedIds.length > 0 && (
                      <div className="sticky bottom-4 z-10 flex justify-center">
                        <GlassCard className="flex items-center gap-3 rounded-full bg-white px-4 py-2 text-[11px]">
                          <span className="text-slate-600">已选择 {selectedIds.length} 条问题</span>
                          <select className="h-7 rounded-full border border-slate-300 bg-white px-2 text-[11px] text-slate-700 outline-none">
                            <option>选择确认类型</option>
                            <option value="problem">确认为问题</option>
                            <option value="falsePositive">确认为误报</option>
                            <option value="fixed">确认为已修复</option>
                            <option value="known">确认为已知问题</option>
                          </select>
                          <input
                            className="w-52 rounded-full border border-slate-300 bg-white px-3 py-1 text-[11px] text-slate-700 outline-none"
                            placeholder="备注（批量应用）"
                          />
                          <button className="rounded-full bg-slate-900 px-3 py-1 text-[11px] font-semibold text-white hover:bg-slate-800">
                            批量确认
                          </button>
                        </GlassCard>
                      </div>
                    )}
                  </div>

                  {drawerOpen && selectedIssue && (
                    <GlassCard className="hidden h-[calc(100vh-90px)] w-[360px] flex-shrink-0 flex-col overflow-hidden border-l border-slate-200 bg-white md:flex">
                      <div className="flex items-start justify-between border-b border-slate-200 px-4 py-3">
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <span
                              className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${
                                levelConfig[selectedIssue.level].badgeClass
                              }`}
                            >
                              <span
                                className={`h-1.5 w-1.5 rounded-full ${
                                  levelConfig[selectedIssue.level].dotClass
                                }`}
                              />
                              {levelConfig[selectedIssue.level].label}
                            </span>
                            <span className="text-xs text-slate-800">
                              {selectedIssue.ruleName}
                            </span>
                          </div>
                          <div className="font-mono text-[11px] text-slate-500">
                            {selectedIssue.filePath} : {selectedIssue.line}
                          </div>
                          <div className="font-mono text-[11px] text-slate-400">
                            问题 ID: {selectedIssue.id}
                          </div>
                        </div>
                        <button
                          className="rounded-full p-1 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
                          onClick={() => setDrawerOpen(false)}
                        >
                          ✕
                        </button>
                      </div>

                      <div className="flex-1 space-y-3 overflow-auto px-4 py-3 text-xs">
                        <section>
                          <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                            问题详情
                          </div>
                          <div className="space-y-1 text-[11px] text-slate-800">
                            <div className="flex justify-between">
                              <span className="text-slate-500">当前确认状态</span>
                              <span>
                                {selectedIssue.confirmStatus === "unconfirmed" ? (
                                  <span className="rounded-full bg-slate-50 px-2 py-0.5 text-[11px] text-slate-600 border border-slate-200">
                                    未确认
                                  </span>
                                ) : selectedIssue.confirmType ? (
                                  <span
                                    className={`rounded-full px-2 py-0.5 text-[11px] ${
                                      confirmTypeTagClass[selectedIssue.confirmType]
                                    }`}
                                  >
                                    已确认 · {confirmTypeLabel[selectedIssue.confirmType]}
                                  </span>
                                ) : (
                                  "已确认"
                                )}
                              </span>
                            </div>
                            {selectedIssue.apiName && (
                              <div className="flex justify-between">
                                <span className="text-slate-500">API 名称</span>
                                <span className="truncate pl-4 text-right">
                                  {selectedIssue.apiName}
                                </span>
                              </div>
                            )}
                            {selectedIssue.interfaceType && (
                              <div className="flex justify-between">
                                <span className="text-slate-500">接口类型</span>
                                <span className="pl-4 text-right">
                                  {selectedIssue.interfaceType}
                                </span>
                              </div>
                            )}
                            {selectedIssue.mismatchType && (
                              <div className="flex justify-between">
                                <span className="text-slate-500">不一致类型</span>
                                <span className="pl-4 text-right">
                                  {selectedIssue.mismatchType}
                                </span>
                              </div>
                            )}
                          </div>
                        </section>

                        <section>
                          <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                            问题描述
                          </div>
                          <div className="rounded-xl bg-slate-50 px-3 py-2 text-[11px] leading-relaxed text-slate-800">
                            {selectedIssue.description}
                            {selectedIssue.suggestion && (
                              <div className="mt-2 border-t border-dashed border-slate-200 pt-2 text-[11px] text-slate-700">
                                <span className="font-semibold text-slate-800">
                                  建议修复方案：
                                </span>{" "}
                                {selectedIssue.suggestion}
                              </div>
                            )}
                          </div>
                        </section>

                        {selectedIssue.codeSnippet && (
                          <section>
                            <div className="mb-1 flex items-center justify-between">
                              <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                                相关代码片段
                              </span>
                              <button className="text-[11px] text-sky-600 hover:text-sky-700">
                                复制代码
                              </button>
                            </div>
                            <div className="overflow-hidden rounded-xl border border-slate-200 bg-slate-50">
                              <pre className="max-h-40 overflow-auto px-3 py-2 text-[11px] leading-relaxed text-slate-800">
                                <code>{selectedIssue.codeSnippet}</code>
                              </pre>
                            </div>
                          </section>
                        )}

                        <section>
                          <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                            确认此问题
                          </div>
                          <div className="space-y-2 rounded-xl border border-slate-200 bg-slate-50 p-3">
                            <div className="space-y-1">
                              <span className="text-[11px] text-slate-700">确认类型</span>
                              <select className="w-full rounded-lg border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-800 outline-none">
                                <option value="">请选择确认类型</option>
                                <option value="problem">确认为问题</option>
                                <option value="falsePositive">确认为误报</option>
                                <option value="fixed">确认为已修复</option>
                                <option value="known">确认为已知问题</option>
                              </select>
                            </div>
                            <div className="space-y-1">
                              <span className="text-[11px] text-slate-700">备注说明</span>
                              <textarea
                                rows={3}
                                className="w-full resize-none rounded-lg border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-800 outline-none placeholder:text-slate-400"
                                placeholder="例如：明确原因、影响范围、是否已安排修复计划等..."
                              />
                              <div className="text-[10px] text-slate-400">最多 200 字</div>
                            </div>
                            <div className="flex items-center justify-between pt-1">
                              <div className="flex items-center gap-2 text-[10px] text-slate-400">
                                <span>最近操作：</span>
                                <span>2024-04-01 15:20 · 张三</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <button className="rounded-full border border-slate-300 px-3 py-1 text-[11px] text-slate-700 hover:bg-slate-100">
                                  取消
                                </button>
                                <button className="rounded-full bg-slate-900 px-4 py-1.5 text-[11px] font-semibold text-white hover:bg-slate-800">
                                  提交确认
                                </button>
                              </div>
                            </div>
                          </div>
                        </section>

                        <section>
                          <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                            确认历史
                          </div>
                          <div className="space-y-2">
                            {selectedIssue.confirmHistory.map((record) => (
                              <div
                                key={`${record.time}-${record.user}`}
                                className="rounded-xl border border-slate-200 bg-white px-3 py-2"
                              >
                                <div className="flex items-center justify-between">
                                  <div className="text-[11px] text-slate-800">
                                    {record.time} · {record.user}
                                  </div>
                                  <span className="text-[10px] uppercase tracking-wide text-slate-400">
                                    {record.action}
                                  </span>
                                </div>
                                {record.type && (
                                  <div className="mt-1 text-[11px] text-slate-800">
                                    确认类型： {confirmTypeLabel[record.type]}
                                  </div>
                                )}
                                {record.fromType && record.toType && (
                                  <div className="mt-1 text-[11px] text-slate-800">
                                    类型变更： {confirmTypeLabel[record.fromType]} → {confirmTypeLabel[record.toType]}
                                  </div>
                                )}
                                {record.comment && (
                                  <div className="mt-1 text-[11px] text-slate-700">
                                    备注：{record.comment}
                                  </div>
                                )}
                              </div>
                            ))}
                          </div>
                        </section>

                        {selectedIssue.inheritedFrom && (
                          <section>
                            <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                              版本继承
                            </div>
                            <div className="space-y-2 rounded-xl border border-purple-200 bg-purple-50 p-3 text-[11px] text-purple-800">
                              <div className="flex items-center gap-2">
                                <span className="h-5 w-5 rounded-full bg-purple-500 text-center text-[11px] leading-5 text-white">⛓</span>
                                <span>
                                  当前问题继承自：{selectedIssue.inheritedFrom.time} · {selectedIssue.inheritedFrom.branch} · 扫描记录 {selectedIssue.inheritedFrom.scanId}
                                </span>
                              </div>
                              <button className="rounded-full bg-purple-600 px-3 py-1 text-[11px] font-semibold text-white hover:bg-purple-500">
                                查看历史版本问题
                              </button>
                            </div>
                          </section>
                        )}
                      </div>
                    </GlassCard>
                  )}
                </div>
              </main>
            </div>
          </div>
        );
      };

      ReactDOM.createRoot(document.getElementById("root")).render(
        <ScanResultDetailPage />
      );
    </script>
  </body>
</html>
